<!--
 * @Description: 
 * @Author: BaldHead
 * @Date: 2022-03-21 14:32:17
 * @LastEditTime: 2022-04-12 19:03:11
 * @LastEditors: Please set LastEditors
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Vue2.0/3.0数据双向绑定的实现原理</title>
</head>


<body>
    姓名:
    <p id="spanValue"></p>
    <input type="text" id="inputValue">
    <script>
        /**
         * Vue2 .0 / 3.0 数据双向绑定的实现原理 defineProperty
         * 1缺点
         * 1.对原始数据进行克隆
         * 2.需要分别给对象中的每一个属性设置监听 obj:{}
         * 3.数据劫持对v8引擎并不 友好
         */

        // var obj = {
        //     name: ""
        // }
        // let newObj = JSON.parse(JSON.stringify(obj))
        // Object.defineProperty(obj, 'name', {
        //     set(val) {
        //         if (val === newObj.name) return;
        //         newObj.name = val;
        //         observe();
        //     },
        //     get() {
        //         return newObj.name;
        //     }
        // })
        /*
         *@Description: vue3.0 proxy  
         *@FuncAuthor: BaldHead
         *@CreateDate: 2022-03-24 20:23:00
         *@LastEditTime: 
         *@LastEditors: 
         *不需要克隆 不需要给每一个属性单独监听属性
         */
        //评测题目:  
        //1、实现一个函数，将数组中的重复元素删除； 
        //2、实现一个函数，将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为一维数组；
        //3、实现一个函数，将字符串逆序返回输出；
        //注：不能离开浏览器页面编写代码，时间30min内；
        let obj = {};
        obj = new Proxy(obj, {
                set(target, prop, value) {
                    target[prop] = value;
                    observe();
                },
                get(target, prop) {
                    return target[prop];
                }
            })
            //数据影响视图
        function observe() {
            spanValue.innerHTML = obj.name;
            inputValue.value = obj.name;
        }
        // observe();
        // setTimeout(() => {
        //     obj.name = "1111"
        // }, 1000)
        //视图影响数据
        inputValue.oninput = function() {
                obj.name = this.value;
            }
            // Vue(MVVM) 和React(MVV M) 的区别 
            // 跨域解决方案和实现原理
            // Vue / Rect组件信息通信引发的面试题
            // var b, i = 0;
            // Object.defineProperty(window, 'b', {

        //     get() {
        //         return ++i;
        //     }
        // });
        // // var a; //a等于什么值
        // if (b == 1 && b == 2 && b == 3) {
        //     console.log(1);
        // }
    </script>
</body>


</html>